<template>
    <div class="autograph f-cb">
        <open-account-pregress></open-account-pregress>
        <div class="autographBox f-cb">
            <h1>{{$t('m.ConfirmInformation')}}</h1>
            <div class="autographBox-content" v-html="pcSign"></div>
            <div class="autographInput f-cb">
                <span>{{$t('m.name')}}：</span>
                <input type="text" v-model="formLabelAlign.sign" :placeholder="$t('m.Pleaseenteryourname')">
            </div>
            <div class="dayTimer">
                {{formLabelAlign.signDate}}
            </div>
            <next-back @NextClick="NextClick" @PrevClick="PrevClick"></next-back>
        </div>
    </div>
</template>

<script>
    import openAccountPregress from "@/components/assembly/openAccountProgress.vue";
    import NextBack from "@/components/inc/NextBack.vue"
    import {pageFlow,BtnsFlow,uploads,analyse,submit,getsubscript} from "@/common/common";
    export default {
        components: {openAccountPregress,NextBack},
        data() {
            return{
                formLabelAlign:{
                    sign:"",
                    signDate:"",
                },
                pcSign:"",
                flowinfo:JSON.parse(sessionStorage.getItem('flowInfo')),
                num:0,
            }
        },
        computed:{
            flowInfo(){
                return JSON.parse(sessionStorage.getItem('flowInfo'))
            },
            lang(){
                return sessionStorage.getItem("lang")=='zh-CN'?'zh':sessionStorage.getItem("lang")=='zh-TW'?'tc':'en';
            },
        },
        mounted(){
            this.flowinfo = this.flowInfo;
            this.num = getsubscript(this.flowInfo)
            this.getflow(this.flowinfo.page_flow[this.num])
            this.getpcSign();
            window.document.title = this.$t('m.autograph')
        },
        methods:{
            getflow(page){
                var _this = this;
                pageFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        if(JSON.stringify(res.data.user_fill) != '{}'){
                            _this.formLabelAlign = res.data.user_fill;
                            var reg = /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i;
                            if(reg.test(_this.formLabelAlign.sign)){
                                _this.formLabelAlign.sign = "";
                            }
                        }else{
                            var timer = new Date();
                            _this.formLabelAlign.signDate = timer.getFullYear()+'-'+(timer.getMonth()+1)+'-'+timer.getDate()
                        }
                        
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else if(res.code == 102 || res.code == 103){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.code == 104){
                        _this.$router.go(0)
                    }else{
                        this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
            },
            getpcSign(){
                var _this = this;
                _this.$axios.get('/open/pcSign')
                .then(function (res) {
                    var res = res.data
                    if(res.code == 1){
                        _this.pcSign = res.data['pcSign_'+_this.lang]
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            NextClick(){
                var _this = this;
                if(_this.formLabelAlign.sign == ""){
                    _this.$message({
                        message:_this.$t('m.Pleaseenteryourname'),
                        type: "warning"
                    })
                    return false;
                }
                var data = {
                    pageId:_this.flowInfo.page_info.id,
                    isModify:Number(sessionStorage.getItem("isModify")),
                    fields:_this.formLabelAlign,
                }
                submit(data,res => {
                    var res = res.data;
                    if(res.code == 1){
                        if(_this.flowinfo.page_info.id == _this.flowinfo.page_flow[_this.flowinfo.page_flow.length - 1]){
                            _this.$router.replace({ path:'/examine'});
                        }else{
                            _this.BtnsFlowBtn()
                            //_this.flowinfo.page_flow[_this.num + 1]
                        }
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else{
                        _this.$message({
                            message: res.msg,
                            type: "warning"
                        })
                    }
                })
            },
            PrevClick(){
                var _this = this;
                if(_this.flowinfo.page_info.id == _this.flowinfo.page_flow[0]){
                    if(Number(sessionStorage.getItem('isModify')) == 1){
                        _this.$router.replace({ path:'/examine'});
                    }else{
                        _this.$router.replace({ path:'/documentType'});
                    }
                }else{
                    _this.BtnsFlowBtn(_this.flowinfo.page_flow[_this.num - 1])
                }
            },
            BtnsFlowBtn(page){
                var _this = this;
                BtnsFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        if(res.data.page_info.type==2){
                            _this.$router.replace({ path:'/custom?id='+res.data.page_info.id});
                        }else{
                            _this.$router.replace({ path:'/'+res.data.page_info.url_path});
                        }
                    }else if(res.code == 102){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.code == 104){
                        _this.$router.go(0)
                    }else if(res.code == 401){
                         _this.$router.replace({path:'/'})
                    }else{
                        this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
            }
        },
        watch:{
            
        }
    }
</script>

<style lang="less">
    .autographBox{
        width: 460px;
        margin:0 auto;
        h1{
            color: @000;
            font-weight: bold;
            font-size: 20px;
            line-height: 40px;
        }
        .autographBox-content{
            font-size: 14px;
            color: @404040;
            line-height: 24px;
            padding: 14px 0 55px;
        }
        .autographInput{
            height: 40px;
            span{
                float: left;
                color: @b0b0b2;
                font-size: 14px;
                width:50px;
                line-height: 40px;
            }
            input[type="text"]{
                float: left;
                border:1px solid @titleColor;
                line-height: 38px;
                height: 40px;
                border-radius:3px;
                width: 360px;
                padding: 0 20px;
            }
            input[type="text"]:focus{
                border-color: @titleColor;
            }
        }
        .dayTimer{
            font-size: 14px;
            color: @b0b0b2;
            line-height: 22px;
            padding:35px 0 97px;
        }
    }
</style>